import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import styles from './Counter.module.css'
import { decrement, increment, incrementAsync, incrementByAmount, selectCount } from './counterSlice'

export default function Counter() {
  const count = useSelector(selectCount)
  const dispatch = useDispatch()
  const [incrementAmount, setIncrementAmount] = useState('2')

  return (
    <div>
        <div className={styles.row}>
            <button
                className={styles.button}
                aria-label="Increment value"
                onClick={() => dispatch(increment())}
            >
                Increment
            </button>
            <span className={styles.value}>{count}</span>
            <button
                className={styles.button}
                aria-label="Decrement value"
                onClick={() => dispatch(decrement())}
            >
                Decrement
            </button>
        </div>
        <div className={styles.row}>
            <input 
                className={styles.textbox}
                aria-label="Set increment amount"
                value={incrementAmount}
                onChange={(e) => setIncrementAmount(e.target.value)}
            />
            <button
                className={styles.button}
                onClick={() => (
                    dispatch(incrementByAmount(Number(incrementAmount) || 0))
                )}
            >
                Add Amount
            </button>
            <button
                className={styles.button}
                onClick={() => dispatch(incrementAsync(Number(incrementAmount) || 0))}
            >
                Add Async
            </button>
        </div>
    </div>
  )
}
